Node / mirrors / respira / files / src / components / ConnectionPrompt.tsx

Displaying Raw • Download

import { useShallow } from "zustand/react/shallow";

import { useMachineStore } from "../stores/useMachineStore";

import { isBluetoothSupported } from "../utils/bluetoothSupport";

import { ExclamationTriangleIcon } from "@heroicons/react/24/solid";

import { Button } from "@/components/ui/button";

import { Card, CardContent } from "@/components/ui/card";

import { Alert, AlertDescription } from "@/components/ui/alert";

export function ConnectionPrompt() {

const { connect } = useMachineStore(

useShallow((state) => ({

connect: state.connect,

})),

);

if (isBluetoothSupported()) {

return (

<Card className="p-0 gap-0 border-l-4 border-gray-400 dark:border-gray-600">

<CardContent className="p-4 rounded-lg">

<div className="flex items-start gap-3 mb-3">

<div className="w-6 h-6 text-gray-600 dark:text-gray-400 flex-shrink-0 mt-0.5">

<svg

className="w-6 h-6"

fill="none"

stroke="currentColor"

viewBox="0 0 24 24"

>

<path

strokeLinecap="round"

strokeLinejoin="round"

strokeWidth={2}

d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.857 15.355-5.857 21.213 0"

/>

</svg>

</div>

<div className="flex-1 min-w-0">

<h3 className="text-sm font-semibold text-gray-900 dark:text-white mb-1">

Get Started

</h3>

<p className="text-xs text-gray-600 dark:text-gray-400">

Connect to your embroidery machine

</p>

</div>

</div>

<Button onClick={connect} className="w-full">

Connect to Machine

</Button>

</CardContent>

</Card>

);

}

return (

<Alert className="bg-warning-50 dark:bg-warning-900/20 border-l-4 border-warning-500 dark:border-warning-600">

<ExclamationTriangleIcon className="h-5 w-5 text-warning-600 dark:text-warning-400" />

<AlertDescription className="space-y-3">

<div>

<h3 className="text-base font-semibold text-warning-900 dark:text-warning-100 mb-2">

Browser Not Supported

</h3>

<p className="text-sm text-warning-800 dark:text-warning-200">

Your browser doesn't support Web Bluetooth, which is required to

connect to your embroidery machine.

</p>

</div>

<div className="space-y-2">

<p className="text-sm font-semibold text-warning-900 dark:text-warning-100">

Please try one of these options:

</p>

<ul className="text-sm text-warning-800 dark:text-warning-200 space-y-1.5 ml-4 list-disc">

<li>Use a supported browser (Chrome, Edge, or Opera)</li>

<li>

Download the Desktop app from{" "}

<a

href="https://github.com/jhbruhn/respira/releases/latest"

target="_blank"

rel="noopener noreferrer"

className="font-semibold underline hover:text-warning-900 dark:hover:text-warning-50 transition-colors"

>

GitHub Releases

</a>

</li>

</ul>

</div>

</AlertDescription>

</Alert>

);

}